<template>
  <div id="footer" class="acea-row row-middle">
    <router-link
      :to="item.url"
      replace
      class="item"
      :class="{ on: item.url === $route.path }"
      v-for="(item, index) in footerList"
      :key="index"
    >
      <div
        class="ysIcon"
        :class="item.icon1 + ' ' + (item.url === $route.path ? item.icon2 : '')"
      ></div>
      <div>{{ item.name }}</div>
    </router-link>
  </div>
</template>
<script>
export default {
  name: "Footer",
  props: {},
  data: function() {
    return {
      footerList: [
        {
          name: "首页",
          icon1: "icon-shouye-xianxing",
          icon2: "icon-shouye",
          url: "/"
        },
        {
          name: "排行",
          icon1: "icon-paihang-xianxing",
          icon2: "icon-paihang",
          url: "/ranking"
        },
        {
          name: "我的",
          icon1: "icon-yonghu-xianxing",
          icon2: "icon-yonghu",
          url: "/user"
        }
      ]
    };
  },
  methods: {}
};
</script>
<style scoped>
#footer {
  border-top: 1px solid #35313c;
}
#footer .item {
  color: #999999;
}
#footer .item.on {
  color: #deaa8a;
}
#footer .item .ysIcon {
  width: 0.48rem;
  height: 0.48rem;
  margin: 0 auto 0.04rem;
}
#footer .item .ysIcon::before {
  content: "" !important;
}
.icon-shouye-xianxing {
  background: url(../assets/images/footer/tab1.png) top left no-repeat;
  background-size: 0.44rem 0.44rem;
  background-position: center;
}
.icon-shouye {
  background: url(../assets/images/footer/tab11.png) top left no-repeat;
  background-size: 0.44rem 0.44rem;
  background-position: center;
}
.icon-paihang-xianxing {
  background: url(../assets/images/footer/tab2.png) top left no-repeat;
  background-size: 0.48rem 0.4rem;
  background-position: center;
}
.icon-paihang {
  background: url(../assets/images/footer/tab22.png) top left no-repeat;
  background-size: 0.48rem 0.4rem;
  background-position: center;
}
.icon-yonghu-xianxing {
  background: url(../assets/images/footer/tab3.png) top left no-repeat;
  background-size: 0.37rem 0.48rem;
  background-position: center;
}
.icon-yonghu {
  background: url(../assets/images/footer/tab33.png) top left no-repeat;
  background-size: 0.37rem 0.48rem;
  background-position: center;
}
</style>
